<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./public.css"> -->
</head>
<style>
   /* p{
        color: red;
        font-size: 30px;
    } */
    h3{
        color: blue;
    }
    .b{
        color: aqua;
    }
    .c{
        color: blue;
    }
    .d{
        font-size: 50px;
    }
    #text{
        color: red;
    }
    .box1{
        width: 400px;
        height: 400px;
        background-color: red;
    }
    .box2{
        width: 400px;
        height:400px;
        background-image: url("../123.png");
        background-repeat: no-repeat;
        /* background-repeat: repeat-x; */
        /* background-size:cover; */
        background-position: left center;
    }
    .p{
        text-align: center;
        /* text-decoration: underline;  下划线 */
        /* text-decoration: overline;  上划线*/
        text-decoration: line-through;  
    }
    h4{
        text-align: center;
        font-size: 30px;
        text-transform: capitalize;
        text-transform: uppercase;
    }
    .p2{
        text-indent: 30px;
    }
    table,td{
        border: 1px solid red;
    }

    table{
        border-collapse: collapse;
        width: 400px;
        height: 300px;
    }
    td{
        text-align: center;
        vertical-align: center;
        padding: 20px;
        background-color: #686565;
        color: aliceblue;
    }
    ul li{
        color: green;
    }
    div>p{
        color: blue;
    }
    h3+p{
        color: red;
    }

    h5~p{
        color: aquamarine;
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color: green;
        padding:50px;
        border:5px solid red;
        margin: 50px;
    }
    .container{
        width: 500px;
        height: 500px;
        background-color: #686565;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .box4{
        width: 100px;
        height: 100px;
        background-color: #e50707;
        flex: 2;
    }
    .box5{
        width: 100px;
        height: 100px;
        background-color: #2257c2;
        flex: 2;
    }
    .box6{
        width: 100px;
        height: 100px;
        background-color: #1ac080;
        flex: 1;
    }
    .box7{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }
    .container1{
        width: 400px;
        height: 400px;
        background-color: #c210dd;
    }
    img{
        width: 300px;
        float: left;
    }

    .box8{
        width: 100px;
        height: 50px;
        background-color: #4ff122;
        border-radius: 5px;
        clear: both;
    }
    .box9{
        width: 50px;
        height: 100px;
        background-color: red;
        clear: both;
        margin: 0 auto;
        box-shadow: 20px 20px 10px rgba(0,0,0,0.5);
    }
</style>
<body>
    <h3>标题内容</h3>
    <p>大学生</p>

<!-- css内联样式（行内样式）
     缺乏整体性和规划性，不利于维护，维护成本高
-->
    <p style="color:red;font-size: 30px;">我是一个内联样式示例</p>
<!-- 内部样式
     在文档头部定义内部样式表，单个页面具有统一性和规划性，多个页面不具备
-->
    <p>我是第二个标签</p>
<!-- 外部样式每个页面通过<link>标签链接到样式表，<link>标签写在头部 -->
    <p>我是第三个标签</p>

<!-- 选择器 
     全局选择器：*；初始化
     元素选择器：根据元素名称，比如h1,p等等，选择的是所有
     类选择器：.,针对你想要的所有标签使用
     id选择器：针对某一个特定的标签来使用，只能使用一次.id是唯一的不能以数字开头
     合并选择器：提取共同的样式，减少代码重复。
     元素优先级：
      行内元素>id选择器>类选择器>元素选择器
-->
   <!-- 类选择器 :class属性特点：类选择器可以被多个标签使用
    类名不能以数字开头，同一个标签可以使用多个类选择器，用空格隔开
-->
   <h1 class="b">好好学习</h1>
   <h1 class="c">天天向上</h1>
   <h3 class="b d">我是三级标题</h3>
   <!-- id选择器 -->
   <h2 id="text">hello</h2>
   <!-- 合并选择器 -->
   <p>我是p标签</p>
   <h3>我是h3标签</h3>
   <!-- 元素优先级 -->
   <h3>行内元素>id选择器>类选择器>元素选择器</h3>
<!-- 字体属性
     color:英文，#+6位数字和字母的组合(16进制)，rgba(0,0,0,0-1(透明度))
     font-size：最小字体为12px
     font-weight:设置文本的粗细，bold(粗体)，bolder(更粗)，lighter(更细)，100-900（400默认，700bold）
     font-style：normal正常，italic斜体
     font-family：指定元素的字体
    -->
<!-- 背景属性
     background-color：背景颜色
     background-image：背景图片
     background-position：背景图片显示位置
          left（right） top 左（右）上角     left（right） center 左（右）中  
          left（right） botton 左（右）下    center top中上   center center 中中
          center botton 中下      ？% ？%
     background-repeat：背景图片如何填充
         repeat:默认，repeat-x:只向水平平铺
         repeat-y：只向垂直平铺，no-repeat：不平铺
     background-size：背景图片大小
         length：宽度和高度
         percentage：计算相对位置区域的百分比
         cover：保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
         contain：保持图片纵横比并将图片缩放成适合背景定位区域的最大大小
 -->
     <div class="box1"></div>
     <div class="box2"></div>

<!-- 文本属性 
     text-align：文本对齐方式
     text-decoration：规定添加到文本的修饰，下划线(underline)，
        上划线(overline)，删除线(line-through)等等
     text-transform:控制文本的大小写,capitalize首字母大写，uppercase全部大写，
        lowercase全部小写
     text-indent：首行文本缩进
-->
     <p class="p">我是一个标题内容</p>
     <h4>helloWorld</h4>
     <p class="p2">路上只我一个人，背着手踱着。这一片天地好像是我的;
        我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;
        爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，
        什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，
        现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。</p>

<!-- 表格属性
     表格边框：border
     折叠边框：border-collapse:collapse;
     表格的宽度和高度
     表格文字对齐：text-align（水平对齐：left，right，center）
        vertical-align（垂直对齐：top，center，bottom）
     
-->

    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

<!-- 关系选择器 
     后代选择器：选择所有被E包含的F元素，中间用逗号隔开
     子代选择器：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示
     相邻兄弟选择器：用+表示，只能向下选择
     通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择

-->
    <!-- 后代选择器 -->
      <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <div>
            <ol>
                <li>列表4</li>
                <li>列表5</li>
            </ol>
        </div>
      </ul>
      <!-- 子代选择器 -->
      <div>
        <p>大家好</p>
        <ul>
            <li>
                <p>我很好</p>
            </li>
        </ul>
      </div>
      <!-- 相邻兄弟选择器 -->
      <h3>我是标题</h3>
      <p>我是内容1</p>
      <p>我是内容2</p>

      <!-- 通用兄弟选择器 -->
      <h5>我是标题</h5>
      <p>我是内容1</p>
      <p>我是内容2</p>
      <p>我是内容3</p>

<!-- css盒子模型（Box Model）：用于设计和布局时使用，
    外边距（marign）：清空边框外的区域，外边框是透明的
    边框（border）：围绕在内边距和内容外的边框
    内边距（padding）：清除内容周围的区域(两个值时，第一个上下，第二个左右)
    实际内容（content）：盒子内容本身，显示文本和图像
-->
    <div class="box3">
        我是内容
    </div>
    <span>我是span标签</span>

<!-- 弹性盒子模型
     display属性的值flex，将其定义为弹性容器
     弹性容器内包含一个或多个弹性
     属性：
     （1）flex-direction位置属性：row(默认)，row-reverse(反转横向排列)
     column：纵向排列，column-reverse(反转纵向排列)
     （2）justify-content属性(垂直方向)：内容属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐
     flex-start靠上摆放，flex-end靠下摆放，center垂直居中摆放
     （3）align-items属性(水平方向)：flex-start居左，flex-end居右，center垂居中摆放
     （4）flex-grow/flex子元素上的属性：按照比率（权重）
-->
     <div class="container">
         <div class="box4"></div>
         <div class="box5"></div>
         <div class="box6"></div>
     </div>
     <!-- 脱离文档流 -->
<!-- 浮动以后脱离文档流
    float属性:left,right
-->
   <div class="box7"></div>
   <div class="container1"></div>

   <div>
    <img src="./1jpg.jpg" alt="">
    <img src="./1jpg.jpg" alt="">
   </div>


<!-- 圆角
    border-radius属性:圆角属性   
-->
   <div class="box8"></div>

<!-- 阴影:
     box-shadow属性:像边框添加一个或多个阴影.
    h-shadow:水平方向的阴影,v-shadow:垂直方向的阴影,blur:阴影的模糊度,color:阴影的颜色
-->
  <div class="box9"></div>

</body>
</html>